<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四个最基本的结构伪类选择器</title>

    <style type="text/css">
        /*!*【:root】 将样式绑定到页面的根元素中*!*/
        :root{
            /*background-color: #000;*/
            /*声明变量*/
            --bgcolor:#ccc;
            --fontColor:#000;
        }

        body{
            /*使用变量 var()*/
            background-color: var(--bgcolor);
        }

        p{
            color: var(--fontColor);
        }

        /*!*E:not() 对某个结构使用样式，但是想排除这个元素下的某个子结构元素*!*/
        /*li:not(.two){*/
        /*    background-color: tomato;*/
        /*}*/

        /*E:empty 匹配所有为空的E元素*/
        li:empty{
            background-color: red;
        }

        /*:target 代表链接到目标时（a 标签）*/
        a:target{
            font-size: 50px;
            font-weight: bold;
            color: tomato;
        }
    </style>

</head>
<body>

<p>我是p标签中的文字颜色</p>
<a href="#ly">莫留言</a>
<a href="#ty">莫唐嫣</a>
<ol>
    <li class="one">我是第一行有序列表</li>
    <li></li>
    <li class="one">我是第二行有序列表</li>
    <li></li>
    <li class="two">我是第三行有序列表</li>
    <li></li>
    <li class="one">我是第四行有序列表</li>
    <li></li>
    <li class="one">我是第五行有序列表</li>
    <li></li>
</ol>

<a href="" id="ly">留言</a>
<a href="" id="ty">唐嫣</a>

</body>
</html>